<template>
  <div class="history-com">
    <div class="history-header">
      <div class="history-btn">
        <span class="icon-btn" @click="historyClose">
          <a-icon-font class="hover-pointer" type="iconicon-beifen-right" />
        </span>
        <strong class="m-span">{{ project && project.name }}已保存版本</strong>
      </div>
      <!-- <div class="history-btn">
        <span class="icon-btn" @click="historyClose">
          <a-icon-font class="hover-pointer" type="iconicon-beifen1" />
        </span>
      </div> -->
    </div>
    <!--  history -->
    <a-spin
      :spinning="isNodeWidgetsLoading"
      class="spinning"
      :class="{ show: isNodeWidgetsLoading }"
    >
    </a-spin>
    <div v-if="!isNodeWidgetsLoading" class="history-content scroll-bar">
      <!-- 历史版本快照 -->
      <div
        v-if="!isNodeWidgetsLoading && historyArray.length > 0"
        class="pipeline-history"
      >
        <a-timeline>
          <a-timeline-item v-for="item in historyArray" :key="item.gmtCreate">
            <a-icon-font
              slot="dot"
              type="iconbanbenkuaizhao"
              class="history-icon"
            />
            <div class="screen-shot">
              <a-row>
                <a-col :span="12"
                  ><strong style="font-size: 14px;">{{
                    item.pipelineSnapshotName
                  }}</strong></a-col
                >
                <a-col :span="12" align="right"
                  ><span class="right-col">{{
                    item.gmtCreate.replace(/T/, ' ')
                  }}</span></a-col
                >
              </a-row>
              <shot-image
                :item="item"
                @update-list="querySnapshot"
              ></shot-image>
              <!-- <div class="img-div">
                <img :src="item.picture" />
                <a-button class="delete-btn" @click="deleteShot(item)"
                  ><a-icon-font
                    class="icon"
                    type="iconicon-beifen5"
                  ></a-icon-font
                ></a-button>
                <a-popconfirm
                  title="将会覆盖当前版本，是否恢复？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="confirm(item)"
                  @cancel="cancel"
                  @visibleChange="handleVisibleChange(item)"
                >
                  <a-icon-font
                    slot="icon"
                    type="iconweiwanpeizhi"
                  ></a-icon-font>
                  <a-button class="recover-btn"><strong>恢复此版本</strong></a-button>
                </a-popconfirm>
              </div> -->
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
      <div v-else class="empty-history">
        <img alt="" src="@/assets/view/empty2.png" />
        <p>暂无版本快照</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import ProjectStore, { Project } from '@/store/modules/project'
import { querySnapshot, recoverSnapshot, deleteSnapshot } from '@/api/pipeline'
// 快照模块
import ShotImage from '@/components/studio/data/graph-compoments/ShotImage.vue'

@Component({
  components: { ShotImage },
})
export default class RunLog extends Vue {
  public historyArray = [
    // {projiectName:'项目三', time:'2021-03-09 12:23', img:'~@/assets/chart-loading.png'},
    // {projiectName:'项目二', time:'2021-03-08 12:23', img:'~@/assets/chart-loading.png'},
    // {projiectName:'项目以', time:'2021-03-07 12:23', img:'~@/assets/chart-loading.png'},
  ]
  private isNodeWidgetsLoading: boolean = false
  @Prop({ type: Boolean, default: false })
  historyRefresh!: boolean
  public get project(): Project | null {
    return ProjectStore.activeProject
  }

  private get pipelineId() {
    return DataViewStore.getPipelineId
  }

  private get projectId() {
    return DataViewStore.projectId
  }

  private get historyStatus() {
    return DataViewStore.getHistoryStatus
  }

  public mounted() {
    if (this.historyStatus) {
      this.querySnapshot()
    }
  }

  @Watch('historyStatus')
  public historyStatusChange() {
    if (this.historyStatus) {
      this.querySnapshot()
    }
  }

  // @Watch('historyRefresh')
  // public historyRefreshChange() {
  //   console.log('history refresh')
  //   if (this.historyRefresh) {
  //     this.querySnapshot()
  //   }
  // }

  public async querySnapshot() {
    this.isNodeWidgetsLoading = true
    const response = await querySnapshot({
      data: {
        pipelineId: this.pipelineId,
        projectId: this.projectId,
      },
    })
    this.historyArray = response.data?.result ?? []
    this.isNodeWidgetsLoading = false
  }

  public confirm(item: any) {
    recoverSnapshot({
      data: {
        pipelineId: item.pipelineId,
        pipelineSnapshotId: item.pipelineSnapshotId,
        projectId: this.projectId,
      },
    })?.then((response: any) => {
      if (response.data.code === 100) {
        this.$message.success('恢复成功！', 3)
        DataViewStore.setPipelineId(item.pipelineId)
        const parameters = {
          id: this.projectId,
          pipelineId: item.pipelineId,
        }
        DataViewStore.queryPipelineNodes(parameters)
        DataViewStore.setPipelineSnapshotId(item.pipelineSnapshotId)
      }
    })
  }

  public deleteShot(item: any) {
    deleteSnapshot({
      data: {
        pipelineId: item.pipelineId,
        pipelineSnapshotIds: [item.pipelineSnapshotId],
        projectId: this.projectId,
      },
    })?.then((response: any) => {
      if (response.data.code === 100) {
        this.$message.success('删除成功！', 3)
        this.querySnapshot()
      }
    })
  }

  public logStatusColor(history: string) {
    const title = history
    const success = 'SUCCESS'
    const fail = 'FAIL'
    let rep: any
    let responseDuring: string
    if (history.indexOf(success) > 0) {
      rep = new RegExp(success, 'g')
      responseDuring = `<span style='color: green; font-weight: 600;'>${success}</span>`
    } else if (history.indexOf(fail) > 0) {
      rep = new RegExp(fail, 'g')
      responseDuring = `<span style='color: red; font-weight: 600;'>${fail}</span>`
    } else {
      rep = new RegExp('', 'g')
      responseDuring = ''
    }
    return title.replace(rep, responseDuring)
  }
  // 选择的节点
  public get selectedNode() {
    return DataViewStore.selectNode
  }
  // 节点日志
  public get selectedNodeLog() {
    if (
      this.selectedNode &&
      DataViewStore.nodeStatusMap[String(this.selectedNode.id)]
    ) {
      const nodeStatusMap =
        DataViewStore.nodeStatusMap[String(this.selectedNode.id)]
      return `[${this.selectedNode.name}_${this.selectedNode.id}] [${
        nodeStatusMap.status
      }] [${nodeStatusMap.logInfo ? nodeStatusMap.logInfo : ''}]`
    }
    return ''
  }

  /**
   * 关闭版本历史
   */
  public historyClose() {
    this.$emit('history-close')
  }
}
</script>

<style scoped lang="less">
.history-com {
  border-left: 1px solid #d8d8d8;
  height: 100%;
  overflow: hidden;
  width: 444px;

  .spinning {
    height: 100%;
    width: 100%;

    &.show {
      margin-top: 50%;
    }
  }

  .history-header {
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    height: 52px;
    justify-content: space-between;
    overflow: hidden;
    padding: 0 16px 0 6px;

    .history-btn {
      display: flex;
      flex-shrink: 0;

      .icon-btn {
        border-radius: 2px;
        cursor: pointer;
        font-size: 16px;
        margin-right: 6px;
        padding: 0 4px;

        &:hover {
          background-color: #f1f1f1;
        }
      }
    }

    .m-span {
      font-size: 16px;
    }
  }

  /* 运行日志 内容 */
  .history-content {
    background-color: #fff;
    box-sizing: border-box;
    height: calc(100% - 38px);
    overflow: auto;
    width: 100%;

    /* 选择节点的日志 */
    .pipeline-history {
      overflow: auto;
      padding: 17px;
      width: 100%;

      .history-icon {
        color: #b5b5b5;
        font-size: 20px;
      }

      .screen-shot {
        padding: 0 10px;

        .right-col {
          color: rgba(34, 36, 50, 0.3);
          font-size: 14px;
        }

        .img-div {
          border: 1px solid #e9e9e9;
          border-radius: 2px;
          height: 230px;
          margin: 16px 0;
          position: relative;

          img {
            height: 100%;
            width: 100%;
          }

          .recover-btn {
            background: rgba(103, 113, 252, 0.1);
            border: 0;
            border-radius: 0 0 2px 2px;
            bottom: 0;
            color: #6973ff;
            display: none;
            height: 52px;
            left: 0;
            position: absolute;
            width: 100%;
            z-index: 200;
          }

          .delete-btn {
            align-content: center;
            align-items: center;
            background-color: rgba(103, 113, 252, 0.09);
            border: 0;
            border-radius: 50%;
            display: none;
            height: 32px;
            position: absolute;
            right: 8px;
            top: 8px;
            width: 32px;

            .icon {
              color: #6973ff;
              font-size: 16px;
              transform: translateX(-50%);
            }
          }

          .warning-icon {
            font-size: 20px !important;
          }

          .ant-popover-message > .anticon {
            font-size: 20px;
          }

          &:hover {
            border: 1px solid #e9e9e9;
            border-radius: 2px;
            box-shadow: 0 2px 8px 1px rgba(88, 98, 230, 0.15);

            .recover-btn {
              display: inline-block;
            }

            .delete-btn {
              display: inline-block;
            }
          }
        }
      }

      p {
        margin-bottom: 6px;
        /*word-break: break-all;*/
        word-wrap: break-word;
      }
    }

    /* 日志内容 */
    .history-text-box {
      overflow: auto;
      padding: 12px;
      width: 100%;

      p {
        margin-bottom: 6px;
        /*word-break: break-all;*/
        word-wrap: break-word;
      }
    }

    /* 日志为空 */
    .empty-history {
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: center;
      width: 100%;

      img {
        margin-bottom: 6px;
        width: 200px;
      }
    }

    /deep/.ant-divider-inner-text {
      color: rgba(0, 0, 0, 0.5);
      font-size: 14px;
    }
  }
}

.scroll-bar {
  /* 滚动条 */
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #333;
  }

  &::-webkit-scrollbar-corner {
    background: rgb(239, 239, 239);
  }
}
</style>
